<template>
	<!-- {{kaoqinStatis}} -->
	<view class="container" v-for="(item, idx) in kaoqinStatis" :key="idx">
		<!-- 团队统计 -->
		<view class="text-title">
			<text>{{item.name}}考勤汇总数据 </text>
		</view>
		<view v-for="(item1, idx1) in item.statis" :key="idx1">
			<uni-section :title="item1.year + '年' + item1.month + '月考勤统计'" type="line">
				<uni-list>
					<uni-list-item title="上班未打卡" :rightText="item1.shangbanweidaka + '次'" clickable showArrow
						@click="gateto(1,item1.year,item1.month,item1.shangbanweidaka, item1.shangbanweidakaDetail)" />
					<uni-list-item title="下班未打卡" :rightText="item1.xiabanweidaka + '次'" clickable showArrow
						@click="gateto(2,item1.year,item1.month,item1.xiabanweidaka, item1.xiabanweidakaDetail)" />
					<uni-list-item title="迟到次数" :rightText="item1.chidao + '次'" clickable showArrow
						@click="gateto(3,item1.year,item1.month,item1.chidao, item1.chidaoDetail)" />
					<uni-list-item title="早退次数" :rightText="item1.zaotui + '次'" clickable showArrow
						@click="gateto(4,item1.year,item1.month,item1.zaotui, item1.zaotuiDetail)" />
					<uni-list-item title="外勤次数" :rightText="item1.waiqin + '次'" clickable showArrow
						@click="gateto(5,item1.year,item1.month,item1.waiqin, item1.waiqinDetail)" />
					<uni-list-item title="请假天数" :rightText="(item1.qingjia / 8).toFixed(1) + '天'" clickable showArrow
						@click="gateto(6,item1.year,item1.month,item1.qingjia, item1.qingjiaDetail)" />
					<uni-list-item title="出差天数" :rightText="item1.chuchai + '天'" clickable showArrow
						@click="gateto(7,item1.year,item1.month,item1.chuchai, item1.chuchaiDetail)" />
					<uni-list-item title="加班次数" :rightText="item1.jiabancishu + '次'" clickable showArrow
						@click="gateto(8,item1.year,item1.month,item1.jiabancishu, item1.jiabancishuDetail)" />
					<uni-list-item title="加班时长" :rightText="item1.jiabanshichang + '小时'" clickable showArrow
						@click="gateto(9,item1.year,item1.month,item1.jiabanshichang, item1.jiabanshichangDetail)" />
					<uni-list-item title="补卡次数" :rightText="item1.buka + '次'" clickable showArrow
						@click="gateto(10,item1.year,item1.month,item1.buka, item1.bukaDetail)" />
					<view style="text-align: center;">
						<button type="primary" size="mini" plain
							@click="exportKaoqinStatis(item1.year,item1.month,item.id)">
							点击下载{{item1.year + '年' + item1.month + '月'}} 考勤统计Excel
						</button>
					</view>
				</uni-list>



			</uni-section>
			<view style="padding: 10px;"></view>
		</view>
	</view>
</template>

<script>
	import {
		websock
	} from '../../net/websock'

	export default {
		data() {
			return {
				kaoqinStatis: []
			}
		},
		async onReady() {
			try {
				this.kaoqinStatis = await websock.groupKaoqinStatis()
				console.log('group kaoqin statis', this.kaoqinStatis)
			} catch (err) {
				console.error(err)
				uni.showToast({
					title: err.message || 'error'
				})
			}
		},
		methods: {
			gateto(typeid, year, month, val, detail) {
				console.log('typeid：', typeid)
				if (val == 0) {
					console.log('11111')
					return uni.showToast({
						title: '该月此项暂无数据',
						icon: 'none'
					})
				}
				uni.navigateTo({
					url: `kaoqintongjiDetail?typ=${typeid}&detail=${JSON.stringify(detail)}`
				})
			},
			// 导出excel
			exportKaoqinStatis(year, month, department) {
				console.log('export', year, month, department)
				let surl = ''
				websock.exportGroupStatis({
					year,
					month,
					departId: department
				}).then(res => {
					console.log(1111, res)
					// const a = document.createElement('a')
					// a.style.display = 'none'
					// a.href = res
					// a.target = '_blank'
					// document.body.appendChild(a)
					// a.click()
					// URL.revokeObjectURL(a.href)
					// document.body.removeChild(a)

					// #ifdef APP-PLUS
					plus.runtime.openURL(res)
					// #endif
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		line-height: 24px;
		background: linear-gradient(to bottom, #E8F5FD 50%, #F5F5F5 100%);
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.text-title {
		font-size: 17px;
		font-weight: bold;
		padding: 10px;
		color: darkcyan;
	}
</style>
